<template>
	<view>
		<view class="container" v-if="!props.show" @click="golist(props.item._id,props.item.name)">
			<image :src="props.item.picurl" mode="aspectFill"></image>
			<view class="time">{{$u.timeFrom(props.item.updateTime,false)}}</view>
			<view class="int">{{props.item.name}}</view>
		</view>
		<navigator url="/pages/classify/classify" open-type="reLaunch" class="container" v-if="props.show">
			<image src="../../static/wallpaper/classify1.jpg" mode="aspectFill"></image>
			<view class="mask">
				<u-icon name="more-dot-fill" color="#fff" size="30"></u-icon>
				<text>更多</text>
			</view>
		</navigator>
	</view>
</template>

<script setup>
	const props = defineProps({
		show: {
			type: Boolean
		},
		item: {
			type: Object,
			default () {
				return {
					name: '默认名称',
					picurl: "../../static/wallpaper/classify1.jpg",
					updateTime: 1699538226071
				}
			}
		}
	})
	const golist = (id, name) => {
		uni.navigateTo({
			url: "/pages/list/list?id=" + id + '&name=' + name
		})
	}
</script>

<style scoped lang='scss'>
	.container {
		margin-top: 10px;
		position: relative;
		border-radius: 10px;
		overflow: hidden;

		image {
			width: 230rpx;
			height: 400rpx;
		}


		.time {
			position: absolute;
			top: 0;
			left: 0;
			width: fit-content;
			background-color: $uni-color-warning;
			color: #fff;
			font-size: 12px;
			transform: scale(0.8);
			transform-origin: left top;
			padding: 0 15rpx;
		}

		.int {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background-color: rgba(0, 0, 0, 0.2);
			backdrop-filter: blur(20rpx);
			color: #fff;
		}

		.mask {
			position: absolute;
			top: 0;
			width: 230rpx;
			height: 400rpx;
			background-color: rgba(0, 0, 0, 0.1);
			backdrop-filter: blur(10px);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #fff;

		}
	}
</style>